<template>
    <div class="topic">
        <header>
            <h2>共{{list_max}}部份，正在进行<span>第{{top_section}}部分</span></h2>
            <h3>第<span>{{is_topic}}</span>题</h3>
            <div class="top_count">还有<span>{{que_count}}</span>题</div>
            <img class="service" src="static/images/service.png" alt="">
        </header>
        <div class="speed">
            <div class="speed_strip"></div>
        </div>
        <section class="section_1">
            <div class="topic_item" v-bind:id="item.top_id"
                 v-for="(item,key) in top_list"
                 :class="key==0?'':'hidden'"
                 v-bind:top_section="item.top_section"
                 v-bind:top_type="item.top_type">
                <div class="topic_title" v-if="(item.top_type)">
                    <div class="question">
                        <img src="static/images/question.png" alt="">
                    </div>
                    <div class="question_text">
                        {{item.top_title}}
                    </div>
                    <div class="clear"></div>
                </div>
                <!--如果题目是单选题-->
                <div v-if="(item.top_type==1)">
                    <ul class="option_list">
                        <li class="option is_option"
                            v-for="item2 in item['option_list']"
                            @click="selected"
                            v-bind:opt_grade="item2.opt_grade"
                            v-bind:opt_topicid="item2.opt_topicid"
                            v-bind:top_second_dimension="item.top_second_dimension"
                            v-bind:top_dimension="item.top_dimension"
                            >
                            <div class="option_img">
                                <img src="static/images/option_no.png" alt="">
                            </div>
                            <div class="option_text">{{item2.opt_desc}}</div>
                        </li>
                    </ul>
                </div>
                <!--如果题目是多选题-->
                <div v-if="(item.top_type==2 )">
                    <ul class="option_list">
                        <li class="option is_option"
                            v-for="item2 in item['option_list']"
                            @click="multi"
                            v-bind:opt_grade="item2.opt_grade"
                            v-bind:opt_topicid="item2.opt_topicid"
                            v-bind:top_second_dimension="item.top_second_dimension"
                            v-bind:top_dimension="item.top_dimension"
                            >
                            <div class="option_img">
                                <img src="static/images/option_no.png" alt="">
                            </div>
                            <div class="option_text">{{item2.opt_desc}}</div>
                        </li>
                    </ul>
                </div>
                <!--如果题目是量表题-->
                <div v-if="(item.top_type==4)" class="gauge">
                    <div>{{item.top_left_text}}</div>
                    <div>
                        <img src="static/images/guage.png" class="is_option"
                             v-for="item2 in item.top_number"
                             v-bind:opt_grade="item2"
                             @click="selected_gauge"
                             v-bind:opt_topicid="item2.opt_topicid"
                             v-bind:top_second_dimension="item.top_second_dimension"
                             v-bind:top_dimension="item.top_dimension"
                             >
                    </div>
                    <div>{{item.top_right_text}}</div>
                    <div class="clear"></div>
                </div>
                <!--如果题目是填空题-->
                <div v-if="(item.top_type==3)" class="gauge">
                    <textarea name=""  placeholder="请在这里输入您的回答" class="blanks"  id="" rows="5" @change="blanks"></textarea>
                </div>
                <!--如果题目是跳转题-->
                <div v-if="(item.top_type==5 )" class="jump">
                    <ul class="option_list">
                        <li class="option is_option"
                            v-for="item2 in item['option_list']"
                            v-bind:jump="item2.opt_guageid"
                            @click="selected"
                            v-bind:opt_grade="item2.opt_grade"
                            v-bind:opt_topicid="item2.opt_topicid"
                            v-bind:top_second_dimension="item.top_second_dimension"
                            v-bind:top_dimension="item.top_dimension">
                            <div class="option_img">
                                <img src="static/images/option_no.png">
                            </div>
                            <div class="option_text">{{item2.opt_desc}}</div>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
        <section class="section_2">
            <div class="topic_item"
                 v-for="(item,key) in finally_list"
                 :class="key==0?'':''"
                 v-bind:top_section="item.top_section"
                 v-bind:id="item.top_id">
                <div class="topic_title">
                    <!--<div class="question">-->
                        <!--<img src="static/images/question.png" alt="">-->
                    <!--</div>-->
                    <div class="question_text">
                        {{key+1}}. {{item.top_title}}
                    </div>
                    <div class="clear"></div>
                </div>
                <!--如果题目是多选题-->
                <div v-if="(item.top_type==1 ||  item.top_type==5 )">
                    <ul class="option_list">
                        <li class="option is_option"
                            v-for="item2 in item['option_list']"
                            @click="selected"
                            v-bind:opt_grade="item2.opt_grade"
                            v-bind:opt_topicid="item2.opt_topicid"
                            v-bind:top_second_dimension="item.top_second_dimension"
                            v-bind:top_dimension="item.top_dimension">
                            <div class="option_img">
                                <img src="static/images/option_no.png" alt="">
                            </div>
                            <div class="option_text">{{item2.opt_desc}}</div>
                        </li>
                    </ul>
                </div>
                <!--如果题目是多选题-->
                <div v-if="(item.top_type==2 )">
                    <ul class="option_list">
                        <li class="option is_option"
                            v-for="item2 in item['option_list']"
                            @click="multi"
                            v-bind:opt_grade="item2.opt_grade"
                            v-bind:opt_topicid="item2.opt_topicid"
                            v-bind:top_second_dimension="item.top_second_dimension"
                            v-bind:top_dimension="item.top_dimension">
                            <div class="option_img">
                                <img src="static/images/option_no.png" alt="">
                            </div>
                            <div class="option_text">{{item2.opt_desc}}</div>
                        </li>
                    </ul>
                </div>
                <!--如果题目是填空题-->
                <div v-if="(item.top_type==3)" class="gauge">
                    <textarea name=""  placeholder="请在这里输入您的回答" class="blanks"  id="" rows="5" @blur="blanks"></textarea>
                </div>
                <!--如果题目是量表题-->
                <div v-if="(item.top_type==4)" class="gauge">
                    <div>{{item.top_left_text}}</div>
                    <div>
                        <img src="static/images/guage.png" class="is_option"
                             v-for="item2 in item.top_number"
                             v-bind:number="item2"
                             @click="selected_gauge"
                             v-bind:opt_grade="item2.opt_grade"
                             v-bind:opt_topicid="item2.opt_topicid"
                             v-bind:top_second_dimension="item.top_second_dimension"
                             v-bind:top_dimension="item.top_dimension">
                    </div>
                    <div>{{item.top_right_text}}</div>
                    <div class="clear"></div>
                </div>
                <div class="speed"></div>
            </div>
        </section>
        <div class="next"  @click="next">下一题</div>
    </div>

</template>

<script>
    export default {
        name: 'topic',
        data () {
            return {
                qu_id : 1 ,
                top_list : [],//除最后一部份的题目列表
                top_count : 0 ,//题目总数
                top_is_count: 0,//(废弃)
                top_section:1,//当前题目所在部份
                que_count:0,//还有题数
                is_topic : 1 ,//目前所在部份的第几题
                list_max : 0 ,//题目最大部份（用来知道最后一部份是第几部份）
                finally_list : [],//最后一部份的题目列表
                speed_strip : 0 ,//当前进度条数量
                speed_count : 0 ,//进度条总数
                dim_list : {} ,
            }
        },
        mounted () {
            if( sessionStorage.getItem("is_topic") == 1 )
            {
                location.href = "#Paper"
            }
            else
            {
                sessionStorage.setItem("is_topic",1)
            }
            setTimeout( e => {
//                console.log(localStorage.getItem('openid'))
                //获取该问卷下所有题目
                this.qu_id = sessionStorage.getItem('qu_id');
                var url = this._API_ + "topic_info?qu_id="+this.qu_id;

                this.$http.get(url).then( e => {

                    this.que_count = e.data.top_count
                    this.speed_count = e.data.top_count
                    this.top_list = e.data.front
                    this.list_max = e.data.max
                    this.finally_list = e.data.finally

                })

            },300)
        },
        components : {

        },
        methods : {
            //下一步
            next (e) {

                //多项题
                var ev = $('.section_1 .topic_item:not(.hidden)');
                //判断填空题
                var textarea = ev.find('textarea').val() == undefined ? '' : ev.find('textarea').val()

                if( ev.find('.is_option.selected').length != 0 || textarea )
                {

                    if( this.que_count == 0 )
                    {
                        alert('答完，后续操作');
                        return false;
                    }
                    //如果是跳转题
                    if ( ev.attr('top_type') == 5 )
                    {

                        //跳转到绑定的选项
                        var ev = ev.find('.is_option.selected')
                        var jump = ev.attr('jump')
                        $('#'+jump).siblings().addClass('hidden')
                        $('#'+jump).removeClass('hidden')

                        //要跳转的题目在所有题目中的索引减去父元素在题目中的索引，得出还有题和进度条该减掉的部份
                        var n = $('.topic_item').index($('#'+jump)) - ev.parents('.topic_item').index()

                        //还有题数-1
                        this.que_count = this.que_count - n
                        this.speed_strip = this.speed_strip + n

                        //进度条增加
                        this.speed_strip ++
                        var speed = this.speed_strip / this.speed_count * 100 +'%'
                        $('.speed_strip').css('width',speed)
                        return false

                    }

                    //判断是否进入下部份
                    if( ev.next().attr('top_section') == this.top_section )
                    {
                        //不是进入下部份的话，第X题+1
                        this.is_topic = this.is_topic + 1

                        //进度条增加
                        this.speed_strip ++
                        var speed = this.speed_strip / this.speed_count * 100 +'%';
                        $('.speed_strip').css('width',speed)

                        //还有题数-1
                        this.que_count = this.que_count - 1

                    } else {

                        //判断是否是最后一部份，如果是，切换到第二个section
                        if( ev.next().attr('top_section') && ev.next().attr('top_section') != this.list_max )
                        {
                            this.is_topic == 1
                            this.top_section = ev.next().attr('top_section')

                            //进度条增加
                            this.speed_strip ++
                            var speed = this.speed_strip / this.speed_count * 100 +'%';
                            $('.speed_strip').css('width',speed)

                            //还有题数-1
                            this.que_count = this.que_count - 1


                        } else {

                            //还有题数-1
                            this.que_count = this.que_count - 1

                            //进度条增加
                            this.speed_strip ++
                            var speed = this.speed_strip / this.speed_count * 100 +'%';
                            $('.speed_strip').css('width',speed)

                            //当前元素所在部份等于最大部份
                            this.top_section = this.list_max
                            $('.section_1').hide();
                            $('.section_2').show();

                            //大标题修改为基本信息
                            $('header h3').html('基本信息')
                            $('header .top_count').html('最后一题')
                            $('.next').text('提    交')

                        }

                    }

                    ev.addClass('hidden');
                    ev.next().removeClass('hidden');
                } else {
                    if( this.speed_strip / this.speed_count >= 1){

                        //获取问卷信息
                        var an_questionnaireid = this.qu_id;//问卷id
                        var openid = localStorage.getItem('openid')
                        var nickname = localStorage.getItem('nickname')
                        var headimgurl = localStorage.getItem('headimgurl')
                        //获取用户选项详细内容
                        var arr = []
                        $('.selected').each(function (e){
                            arr[e] = {}
                            //选项位置
                            //选项位置这里，如果是填空题，就直接取他的position值，否则取位置就好

                            if( $(this).attr('position') != undefined ){
                                arr[e].position = $(this).attr('position')
                            } else {
                                arr[e].position = $(this).parent().children().index(this) + 1
                            }

                            //题目id
                            arr[e].top_second_dimension = $(this).attr('top_second_dimension')
                            arr[e].top_dimension = $(this).attr('top_dimension')
                            arr[e].opt_grade = $(this).attr('opt_grade')
                            arr[e].aop_topicid = $(this).parents('.topic_item').attr('id')

                        })
//                        return false;
                        var url = this._API_ + "result";
                        var data = { an_questionnaireid , openid , nickname , headimgurl , arr }

                        this.$http.post(url,data).then( e => {
                            if( e.data != 0 ){
                                console.log(e.data)
                                sessionStorage.setItem("an_id", e.data)
                                location.href = "#Result"
                            } else {
                                alert("请交失败，请重新尝试")
                            }

                        })

                    } else {
                        alert('请先选题')
                    }
                }
            },
            //单项选择
            selected (e) {

                var ev = $(e.currentTarget);
                //修改图片
                ev.children().children('img').attr('src','static/images/option_selected.png')
                ev.siblings().children().children('img').attr('src','static/images/option_no.png')

                //如果是最后一部份，添加进度条长度
                if( this.list_max == this.top_section ){

                    if( ev.parent().children('.selected').length == 0 ){

                        this.speed_strip ++
                        var speed = this.speed_strip / this.speed_count * 100 +'%';
                        $('.speed_strip').css('width',speed)

                        //还有题数-1
                        this.que_count = this.que_count - 1
                    }

                }

                //增加该class确定选中该选项
                ev.addClass('selected')
                ev.siblings().removeClass('selected')

            },
            //多选题
            multi (e) {
                var ev = $(e.currentTarget);

                if(ev.hasClass('selected')){

                    //修改图片
                    ev.children().children('img').attr('src','static/images/option_no.png')

                    //删除选中状态的class
                    ev.removeClass('selected')



                    //如果是最后一部份
                    if( this.list_max == this.top_section ){

                        //判断这一条还有没其他选项是选中的，如果没，移除进度条
                        if( ev.siblings('.selected').length == 0 ){
                            this.speed_strip --
                            var speed = this.speed_strip / this.speed_count * 100 +'%';
                            $('.speed_strip').css('width',speed)

                            //还有题数
                            this.que_count = this.que_count - 1
                        }


                    }

                } else {

                    //修改图片
                    ev.children().children('img').attr('src','static/images/option_selected.png')

                    //增加该class确定选中该选项
                    ev.addClass('selected')
//                    ev.siblings().removeClass('selected')

                    //如果是最后一部份，添加进度条长度
                    if( this.list_max == this.top_section ){

                        //判断这一条还有没其他选项是选中的，如果没，移除进度条
                        console.log(ev.siblings('.selected'))
                        if( ev.siblings('.selected').length == 0 ){
                            this.speed_strip ++
                            var speed = this.speed_strip / this.speed_count * 100 +'%';
                            $('.speed_strip').css('width',speed)

                            //还有题数
                            this.que_count = this.que_count - 1
                        }

                    }

                }

            },
            //量表题
            selected_gauge (e) {

                var ev = $(e.currentTarget)
                ev.siblings('img').attr('src','static/images/guage.png')
                ev.attr('src','static/images/gauge_checked.png')
                //当前元素添加被选中class
                ev.addClass('selected')
                //其他兄弟元素移除选中class
                ev.siblings().removeClass('selected')

                //如果是最后一部份，添加进度条长度
                if( this.list_max == this.top_section ){

                    if( !ev.parent().hasClass('is') ){
                        this.speed_strip ++
                        var speed = this.speed_strip / this.speed_count * 100 +'%';
                        $('.speed_strip').css('width',speed)

                        //还有题数
                        this.que_count = this.que_count - 1
                        //添加class确定已选
                        ev.parent().addClass('is')
                    }
                }
            },
            //填空题
            blanks (e) {
                var ev = $(e.currentTarget)

                //判断填空题的内容是否为空，如果是空，减进度条，如果不是空，则增加进度条
                if( ev.val() == '' ) {
                    this.speed_strip --
                    var speed = this.speed_strip / this.speed_count * 100 +'%';
                    $('.speed_strip').css('width',speed)

                    //还有题数
//                    this.que_count = this.que_count + 1
                } else {

                    ev.addClass('selected')
                    ev.attr('position',ev.val())

                    if( $('header').children('h3').text() == '基本信息' ){

                        this.speed_strip ++
                        var speed = this.speed_strip / this.speed_count * 100 +'%';
                        $('.speed_strip').css('width',speed)
                    }
                }
            },
            //跳转题（已弃用，改成在next方法里再跳转）
            jump (e){
                var ev = $(e.currentTarget)

                //跳转到绑定的选项
                var ev = $(e.currentTarget)
                var jump = ev.attr('jump')
                $('#'+jump).siblings().addClass('hidden')
                $('#'+jump).removeClass('hidden')

                //要跳转的题目在所有题目中的索引减去父元素在题目中的索引，得出还有题和进度条该减掉的部份
                var n = $('.topic_item').index($('#'+jump)) - ev.parents('.topic_item').index()

                //还有题数-1
                this.que_count = this.que_count - n
                //进度条增加
                this.speed_strip ++
                var speed = this.speed_strip / this.speed_count * 100 +'%';
                $('.speed_strip').css('width',speed)
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .start{
        position:absolute;
        bottom:200px;
        width:300px;
        height:100px;
        display: block;
        left:100px;
        font-size:30px;
    }
    .optcaty{
        opacity:0;
    }
    .blanks{
        border:0px;
        width:650px;
        margin:0px auto;
        font-size:3.2rem;
        color:#393939;
    }
    .section_2{
        display: none;
        padding-bottom:93px;
    }
    .next{
        height:93px;
        color:#fff;
        font-size:3.8rem;
        background-color: #f05c78;
        position: fixed;
        bottom:0px;
        width:750px;
        text-align: center;
        line-height:93px;
        text-decoration: none;
    }
    header{
        height:255px;
        width:750px;
        overflow:hidden;
        position: relative;
    }
    header h2{
        height:2.5rem;
        line-height:2.5rem;
        font-size:2.5rem;
        margin-top:30px;
        margin-left:30px;
        color:#959595;
    }
    header h3{
        margin-top:50px;
        text-align: center;
        font-size: 4.4rem;
        color:#000;
        line-height:4.4rem;
    }
    .top_count{
        font-size:2.5rem;
        line-height:2.5rem;
        height:2.5rem;
        color:#9d9d9d;
        text-align: right;
        margin-right:32px;
    }
    header span{
        color:#f05c78;
    }
    .speed{
        background:#ececec;
        height:19px;
        width:750px;
    }
    .speed_strip{
        background:#f05c78;
        height:19px;
        border-radius:0px 10px 10px 0px;
        width:0px;
    }
    .service{
        position: absolute;
        top:20px;
        right:30px;
    }
    .topic_title{
        height:190px;
        width:750px;
        background:#f8f4f5;
        border-bottom:2px solid #e5e4e4;
    }
    .topic_title>div:not(.clear){
        float: left;
    }
    .question{
        margin-top:30px;
        margin-left:30px;
    }
    .question_text{
        margin-top:45px;
        margin-left:28px;
        font-size:3.2rem;
        color:#212121;
        width:568px;
    }
    .option_list{
        padding:0px 50px;
    }
    .option {
        height:152px;
        border-bottom:2px solid #e6e6e6;
    }
    .option>div{
        float: left;
    }
    .option_img{
        width:62px;
        height:152px;
    }
    .option_text{
        width:580px;
        padding-top:60px;
        font-size:2.6rem;
        color:#3e3e3e;
    }
    .option_img img{
        margin-top:52px;
        margin-left:10px;
    }
    .gauge{
        padding:50px 0px;
        text-align:center;

    }
    .gauge>div:not(.clear){
        display:inline-block;
        font-size:28px;
        line-height:35px;
    }
    .gauge>div>img{
        float: left;
        margin-left:40px;
    }
    .gauge>div>img:last-child{
        margin-right:60px;
    }
    .gauge>div>img:first-child{
        margin-left:60px;
    }
    .section_2 .topic_title{
        background:#fff;
        height:auto;
        padding-bottom:10px;
        border:0px;
    }
</style>
